<!--  -->
<template>
  <div class='padding20 experAudit' ref=''>
    <div class="search">
      <FormSearch ref="searchFrom" :formItem="searchItem" :formData.sync="searchData" :buttonList="buttonAll.searchList" @clearForm="clearForm" @bulkDelete="bulkDelete" @searchData="search" @importData="importData"/>
    </div>
    <div class="content">
      <Table :list="tableData" :title-list="titleList" :selection="true" :isMultiDisable="true" :action-list="buttonAll.actionList" @action="action" @SelectionChange="handleSelection">
        <template v-slot:[it.prop]="prop" v-for="(it, index) in titleList.filter((it) => it.slot)">
          <span :key="index">
            <!-- 实验类型 -->
            <span v-if="it.prop == 'expGroup'">{{toExperType(prop.data.expGroup)}}</span>
            <!-- 实验状态 -->
            <span v-if="it.prop == 'state'">{{toState(prop.data.state)}}</span>
            <!-- 审核状态 -->
            <span v-if="it.prop == 'checkState'">
              <el-button type="text" @click="stateProcess(prop.data.id)">{{ transState(prop.data.checkState) }}</el-button>
            </span>
            <span v-if="it.prop == 'urge'"> 
              <el-button type="text" :class="prop.data.urge == '0'? 'agreeDisabled' : ''" :disabled="prop.data.urge == '0'" @click="rushApproval(prop.data.id)">{{prop.data.urge}}</el-button>
            </span>
            <span v-if="it.prop == 'operate'">
              <el-button 
                type='text'
                @click.native='apply(prop.data)' 
                style="margin-right:20px"
               >详情
               </el-button>
                 <!-- <el-button v-if="prop.data.state !== '2' && showBtn " class="agreeDisabled" type='text' @click.native='agree(prop.data)' :disabled="prop.data.state !== '2' ">通过</el-button> -->
                <el-button v-if="prop.data.checkState == '1' && showBtn " class="agree" type='text' @click.native='agree(prop.data)' >通过</el-button>

                <!-- <el-button v-if="prop.data.state !== '2' && showBtn" class="agreeDisabled" type='text' @click.native='reject(prop.data)' :disabled="prop.data.state !== '2' ">驳回</el-button> -->
                <el-button v-if="prop.data.checkState == '1' && showBtn" class="reject" type='text' @click.native='reject(prop.data)' >驳回</el-button>
            </span>
            <span :key="index" v-if="it.prop == 'index'">
              {{prop.index + (params.currentPage - 1) * params.pageSize + 1 }}
            </span>
          </span>
        </template>
      </Table>
      <!-- 分页器 -->
       <el-pagination
            :style="{float: 'right', padding: '20px'}"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2, 3, 5, 10]"
            :page-size="params.pageSize"
            :current-page="params.currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="params.total">
          </el-pagination>
      <!-- 点击详情——弹框 -->
      <el-dialog
        :visible="showDialog"
        @close="closeDialog"
        :modal="false"
        title="详情"
        width="60%"
        >
        <span class="dialogTitle">
          <h3>实验信息</h3>
          <div class="diaBtn">
              <el-button v-if="detailData.checkState == '1' && showBtn"  size="small" type="success" @click.native='agree(detailData)'>通过</el-button>
              <el-button v-if="detailData.checkState == '1' && showBtn"  size="small" type="danger" @click.native='reject(detailData)'>驳回</el-button>
          </div>
        </span>
        <el-row class="diaTitleText" v-if="showDialog">
          <el-col :span="8">
            <div class="left">
              <div>实验名称：{{detailData.expName}}</div>
              <div>申请人：{{detailData.person}}</div>
              <div>描述：{{detailData.remark}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              实验类型：{{toExperType(detailData.expGroup)}}
            </div>
            <div>
              申请套数：{{detailData.tpCount}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="right">
              <div>申请期限：{{detailData.startTime}} 至 {{detailData.endTime}}</div>
              <div>结果提交方式：{{toPostType(detailData.resSubway)}}</div>
            </div>
          </el-col>
        </el-row>
        <hr> 
        <h3 class="threeTitle">数据资源</h3>
        <el-table :data="resourceList.filter((item) => item.resType === '1')">
          <el-table-column align="center" label="编号" type="index"></el-table-column>
          <el-table-column align="center" label="数据名称" prop="name"></el-table-column>
          <el-table-column align="center" label="属性"></el-table-column>
          <el-table-column align="center" label="描述"></el-table-column>
          <el-table-column align="center" label="每套申请数量" prop="count"></el-table-column>
          <el-table-column align="center" label="申请总数"></el-table-column>
          <el-table-column align="center" label="资源余量"></el-table-column>
          <el-table-column align="center" label="阈值"></el-table-column>
        </el-table>
        <h3 class="threeTitle">模型资源</h3>
        <el-table :data="resourceList.filter((item) => item.resType === '2')">
          <el-table-column align="center" label="编号" type="index"></el-table-column>
          <el-table-column align="center" label="数据名称" prop="name"></el-table-column>
          <el-table-column align="center" label="属性"></el-table-column>
          <el-table-column align="center" label="描述"></el-table-column>
          <el-table-column align="center" label="每套申请数量" prop="count"></el-table-column>
          <el-table-column align="center" label="申请总数"></el-table-column>
          <el-table-column align="center" label="资源余量"></el-table-column>
          <el-table-column align="center" label="阈值"></el-table-column>
        </el-table>
        <h3 class="threeTitle">硬件资源</h3>
        <el-table :data="resourceList.filter((item) => item.resType === '3')">
          <el-table-column align="center" label="编号" type="index"></el-table-column>
          <el-table-column align="center" label="设备名称" prop="name"></el-table-column>
          <el-table-column align="center" label="设备类型"></el-table-column>
          <el-table-column align="center" label="描述"></el-table-column>
          <el-table-column align="center" label="每套申请数量" prop="count"></el-table-column>
          <el-table-column align="center" label="申请总数"></el-table-column>
          <el-table-column align="center" label="资源余量"></el-table-column>
        </el-table>
      </el-dialog>
      <!-- 催批人/次数弹窗 -->
      <rushAppDialog
        :show-dialog="rushAppShowDialog"
        @close-show-dialog="closeRushDialog"
        :rush-app-data="rushData"
      />
      <!-- 审批流程弹框 -->
      <stateDialog
        :show-state-dialog="stateShowDialog"
        @close-state-dialog="closeStateDialog"    
      />
    </div>
    
  </div>
</template>

<script>
import util from "./components/utils2.js";
import experApi from "./api/exper.service.js";
import { log } from 'util';
import rushAppDialog from './components/rushAppDialog.vue'
import stateDialog from './components/stateDialog.vue'

export default {
  components: {
    rushAppDialog,
    stateDialog
    },
  data() {
    return {
      ...util.getExperAudit(),
      originTitleList: [],
      multiSelection: [],
      rushAppShowDialog:false,
      stateShowDialog:false,
      showDialog:false,
      ids:[],
      idss:'',
      params: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      detailData:{},
      resourceList:[],
      roleCode:'',
      roleCodeName: '',
      roles: '',
      showBtn: false,
      rushData:[],
      experTypeArr: [],
      experStateTypeArr: [],
      postType: [],

    };
  },
  mounted() {
    this.fetchList();
  },
  methods: {
    // 查询
    search(it) {
      this.fetchList();
    },

    // 重置表单
    clearForm() {
      this.$refs.searchFrom.$refs.formSearch.resetFields();
      this.fetchList();
    },

    // 获取数据列表
    async fetchList(url) {
      let { data } = await experApi.getPage({...this.params,...this.searchData});
      this.tableData = data.records;
      this.params.total = data.totalRecordCount;
    },

    // 获取资源数据和详情数据
    async apply(data) {
      const res = await experApi.testDetail(data.id)
      console.log('详情数据---',res.data)
      this.detailData = res.data
      const result = await experApi.selectResource({id:data.id})
      this.resourceList = result.data
      this.showDialog = true
      this.reset()
    },

    // 批量操作通用、
    reset(){
      this.fetchList();
      this.stateType()
      this.experType()
      this.ids = []
      this.multiSelection = []
    },

    // 点击通过按钮
    async agree(num){
      try {
        const res = await experApi.textCheck({id:num.id,checkState:'2', roles: this.roles});
        if (res.code === 10200) {
          this.$message.success(res.data)
          this.reset()
          this.closeDialog()
        }
      }catch (error) {
        this.$message.error(res.msg)
      }
      
    },

    // 点击驳回按钮
    async reject(num){
      try{
        let res = await experApi.textCheck({id:num.id,checkState:'3', roles: this.roles});
        if (res.code === 10200) {
          this.$message.success(res.data)
          this.reset()
        }
      }catch (error) {
        this.$message.error(res.msg)
      }
    },

    // 批量通过
    async bulkDelete(){
      try{
        const res = await experApi.textChecks({ids:this.idss,checkState:'2', roles: this.roles})
        if(res.code === 10200){
          this.$message.success('批量操作成功!')
          this.reset()
        }
      }catch(error){
        this.$message.error(res.msg)
      }
    },

    // 批量驳回
    async importData(){
      try {
        const res = await experApi.textChecks({ids:this.idss,checkState:'3', roles: this.roles})
        if(res.code === 10200){
          this.$message.success('批量操作成功！')
          this.reset()
        }
      }catch(error) {
        this.$message.error(res.msg)
      }
    },

    // 状态栏
    async stateType() {
      let { data } = await experApi.checkType();
      this.experStateTypeArr = data;
      //  console.log('状态栏',data)
    },
    toState(val) {
      console.log(this.experStateTypeArr)
      for(let item of this.experStateTypeArr) {
        if (item.value == val) {
          console.log(val, item.value)
          return item.label
        }
      }
    },
    // 实验类型
    async experType() {
      let { data } = await experApi.experType();
      this.experTypeArr = data
      //  console.log('实验类型',data)
      this.searchItem.find(it => it.prop == "expGroup").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
    },
    toExperType(val) {
      for(let item of this.experTypeArr) {
        if (item.value == val) {
          console.log(val, item.value)
          return item.label
        }
      }
    },
    // 结果提交方式
  async getResultApl() {
    let res =  await experApi.resultApl()
    this.postType = res.data
  },
  toPostType(postTypeValue) {
    for(let item of this.postType) {
      if (item.value == postTypeValue) {
        return item.label
      }
    }
  },
     // 审核
    transState(value){
      const TYPE = {
        1: '待审核', 
        2: '通过', 
        3: '驳回',
      }
      return TYPE[value]
    },
    // 催批
    async rushApproval(id){ 
      this.rushAppShowDialog = true
      const {data} = await experApi.rushApproval(id)
      this.rushData = data
      console.log('催批结果--', this.rushData)
      // const result = await experApi.getRushAppInfo(id)
      // console.log('根据id获取的催批信息',result)
    },

    // 关闭催批弹窗
    closeRushDialog(){
      this.rushAppShowDialog = false
    },

    // 点击状态栏
    stateProcess(){
      this.stateShowDialog = true
    },

    // 关闭状态栏弹窗
    closeStateDialog(){
      this.stateShowDialog = false
    },

    // 分页器
    handleSizeChange(size) {
      this.params.pageSize = size;
      this.fetchList();
    },
    handleCurrentChange(page) {
      this.params.currentPage = page;
      this.fetchList();
    },

    // 获取选中的数据信息
    handleSelection(val) {
      this.multiSelection = val;
      for (let i = 0; i < val.length; i++) {
        this.ids.push(val[i].id)
        this.ids= this.unique(this.ids)
        this.idss = this.ids.join()
      } 
    },

    // 关闭实验详情弹框
    closeDialog(){
      this.showDialog = false
    },
    async getRoleName(roleId) {
      let roleCodeName = await experApi.getRoleName(roleId)
      sessionStorage.setItem("roleCodeName", JSON.stringify(roleCodeName.data[0]));
      this.roleCodeName = roleCodeName.data[0].name
      this.buttonAll.searchList.filter(item => {
        if (item.type === 'delete' || item.type === 'import') {
          if ((this.roleCode === '000'&& this.roleCodeName === 'kyadmin') || (this.roleCode === '999' && this.roleCodeName === 'kfry')) {
            item.alwaysShow = true
          }else {
            item.alwaysShow = false
          }
        }
        return item
      })
      if ((this.roleCode === '000'&& this.roleCodeName === 'kyadmin') || (this.roleCode === '999' && this.roleCodeName === 'kfry')){ 
        this.showBtn = true
      }
    }
  },

  // 批量操作按钮执行权限选项
  created() {
    this.roleCode = JSON.parse(sessionStorage.getItem("allUserInfo")).roleCodes[0]
    this.roles = JSON.parse(sessionStorage.getItem("allUserInfo")).roles[0]
    this.stateType()
    this.experType()
    this.getResultApl()
      // let roleCodeName = JSON.parse(sessionStorage.getItem("roleCodeName")).name
    this.getRoleName(this.roles)
  }
};
</script>
<style scoped>
.dialogTitle {
  display: flex;
  justify-content: space-between;
}

.diaTitleText div {
  line-height: 40px;
}

.threeTitle {
  margin-top: 20px;
  margin-bottom: 20px;
}

.dialogTitle {
  margin-bottom: 20px;
}

.left {
  margin-bottom: 40px;
}

.agree {
  color:#0e9b4f !important;
}

.agreeDisabled {
  color:#606266 !important;
}

.reject {
  color:#D9001B !important;
}
</style>
<style lang="less">
.el-button--text{
  margin-left: 10px !important;
  margin-right: 10px !important;
}
</style>
